<template>
  <div class="user">
    <div class="userH">
      <div></div>
      <div class="col ajc">
        <p>
          <!-- <img src="../assets/userH.png" /> -->
          <img :src="user.picture_big" />
        </p>
        <p>{{user.name}}</p>
        <p>
          <span>
            <img src="../assets/phone.png" />
          </span>
          <span>{{user.phone}}</span>
          <span>
            <img src="../assets/rightW.png" />
          </span>
        </p>
      </div>
      <div>
        <img src="../assets/set.png" />
      </div>
    </div>
    <div class="userInfo col wn">
      <div class="bt">
        <p>置顶</p>
        <p>
          <span>查看</span>
          <span>
            <img src="../assets/right.png" />
          </span>
        </p>
      </div>
      <div class="bt">
        <p @click="$router.push('/publish')">
          <span>
            <img src="../assets/fbdd.png" />
          </span>
          <span>发布订单</span>
        </p>
        <p @click="snatchRecord">
          <span>
            <img src="../assets/qdjl.png" />
          </span>
          <span>抢单记录</span>
        </p>
        <p @click="expense">
          <span>
            <img src="../assets/xfjl.png" />
          </span>
          <span>消费记录</span>
        </p>
        <p @click="status">
          <span>
            <img src="../assets/smrz.png" />
          </span>
          <span>实名认证</span>
        </p>
      </div>
    </div>
    <div class="userSumbit wn">
      <div class="bt ac" @click="userInfo">
        <p>
          <span>
            <img src="../assets/sz.png" />
          </span>
          <span>个人资料</span>
        </p>
        <p>
          <img src="../assets/right.png" />
        </p>
      </div>
      <div class="bt ac">
        <p>
          <span>
            <img src="../assets/gywm.png" />
          </span>
          <span>关于我们</span>
        </p>
        <p>
          <img src="../assets/right.png" />
        </p>
      </div>
      <div class="bt ac">
        <p>
          <span>
            <img src="../assets/zffx.png" />
          </span>
          <span>转发分享</span>
        </p>
        <p>
          <img src="../assets/right.png" />
        </p>
      </div>
      <div class="bt ac" @click="suggest">
        <p>
          <span>
            <img src="../assets/tsjy.png" />
          </span>
          <span>投诉建议</span>
        </p>
        <p>
          <img src="../assets/right.png" />
        </p>
      </div>
    </div>
    <div class="loginOut">
      <p>
        <span @click="signOut">退出登录</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user:{}
    };
  },
  created() {
    this.$parent.showTabbar = true;
    this.getUserInfo();
  },
  methods: {
    signOut() {
      if (localStorage.getItem('token')) {
        localStorage.removeItem('token')
        localStorage.removeItem('uid')
      }
      this.$router.push({
        path: '/login'
      })
    },
    getUserInfo(){
      this.$axios({
        url:'common/user',
      }).then(res=>{
        console.log(res)
        if(res.data.code ===200){
          if(!res.data.data[0].picture_big){
            res.data.data[0].picture_big = require('../assets/userH.png')
          }
          this.user = res.data.data[0]
        }
      })
    },
    status() {
      this.$router.push("status");
    },
    expense() {
      this.$router.push("expense");
    },
    snatchRecord() {
      this.$router.push("snatchRecord");
    },
    suggest() {
      this.$router.push("suggest");
    },
    userInfo() {
      this.$router.push("userInfo");
    },
  }
};
</script>

<style lang="less">
.userH {
  padding: 40px 0 15px 0;
  display: flex;
  width: 100%;
  background: url("../assets/userbg.png");
  background-size: 100%;
  div:nth-child(1),
  div:nth-child(3) {
    width: 10%;
  }
  div:nth-child(2) {
    width: 80%;
    p {
      display: flex;
      align-items: center;
    }
    p:first-child {
      display: flex;
      justify-content: center;
      border-radius: 50%;
      img {
        width: 80%;
        border-radius: 50%;
      }
    }
    p:nth-child(2) {
      padding: 5px 0;
      color: #fff;
      font-size: 16px;
    }
    p:nth-child(3) {
      display: flex;
      align-items: center;
      span {
        display: flex;
      }
      span:nth-child(2) {
        font-size: 16px;
        color: #fff;
        padding: 0 10px 0 0;
      }
      span:nth-child(1) {
        img {
          width: 60%;
          height: 1.3rem;
        }
      }
      span:nth-child(3) {
        img {
          width: 70%;
          height: 0.85rem;
        }
      }
    }
  }
  div:last-child {
    img {
      width: 1.53rem;
      height: 1.4rem;
    }
  }
}
.userInfo {
  background: #fff;
  border-radius: 5px;
  margin-top: 10px;
  box-shadow: 2px 2px 1px #ddd;
  div:first-child {
    display: flex;
    width: 90%;
    margin: 0 auto;
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
    p:first-child {
      font-size: 17px;
      font-weight: bold;
    }
    p:last-child {
      display: flex;
      align-items: center;
      img {
        width: 0.5rem;
        height: 0.8rem;
      }
      span {
        padding-left: 8px;
        font-size: 14px;
        color: #bbb;
      }
    }
  }
  div:last-child {
    padding: 15px 0;
    p {
      width: 25%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      img {
        width: 60%;
        margin-bottom: 8px;
      }
      span {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
.userSumbit {
  background: #fff;
  border-radius: 5px;
  margin-top: 10px;
  box-shadow: 2px 2px 1px #ddd;
  div {
    padding: 16px 20px 10px 20px;
    border-bottom: 1px solid #ccc;
    p {
      display: flex;
      align-items: center;
      span {
        display: flex;
        font-size: 16px;
        font-weight: bold;
      }
      span:first-child {
        img {
          width: 1.4rem;
          height: 1.4rem;
          padding-right: 8px;
        }
      }
    }
    p:last-child {
      img {
        width: 0.7rem;
        height: 1rem;
      }
    }
  }
}
.loginOut {
  text-align: center;
  padding: 15px 0 80px 0;
  p {
    span {
      font-size: 19px;
      background: #e50b07;
      border-radius: 5px;
      color: #fff;
      padding: 5px 13px;
    }
  }
}
</style>